<template>
  <view class="flex-1">
		<template v-if="settingInfo.switchCharter == 1">
			<!-- #ifdef MP-WEIXIN -->
			<customNav class="relative z-[111]" title="特惠包机详情"></customNav>
			<view
				class="bg-header px-5"
				:style="{
					paddingTop: navHeight * 2 - systemInfo.statusBarHeight * 2 + 22 + 'rpx',
					marginTop: systemInfo.statusBarHeight * 2 + 'rpx',
				}"
			>
				<view class="flex items-center justify-between">
					<view>
						<view class="text-black text-[48rpx] font-semibold">{{
							airInfo.start_city
						}}</view>
						<view class="text-[#767676] text-[20rpx]">出发</view>
					</view>
					<view
						class="text-[#222222] text-xl font-medium"
						v-if="airInfo.start_date === airInfo.end_date"
						>{{ airInfo.start_date }}</view
					>
					<view class="text-[#222222] text-xl font-medium" v-else
						>{{ airInfo.start_date }}-{{ airInfo.end_date }}</view
					>
					<view>
						<view class="text-black text-[48rpx] font-semibold">{{
							airInfo.end_city
						}}</view>
						<view class="text-[#767676] text-[20rpx] text-right">到达</view>
					</view>
				</view>
				<image
					src="@/static/aaaa.png"
					mode="widthFix"
					class="w-full mt-2"
				></image>
				<view class="text-xs text-[#767676] text-center -mt-1">{{
					airInfo.flight_time_str
				}}</view>
			</view>
			<!-- #endif -->

			<view class="px-5 -mt-[70rpx]">
				<view class="bg-white px-[30rpx] pt-5 pb-[30rpx] rounded-xl">
					<view class="text-black text-xl font-semibold text-center">{{
						airInfo.plan_name
					}}</view>
					<view class="text-[#979797] text-xs text-center mt-[20rpx]">{{
						airInfo.plan_name_ne
					}}</view>

					<swiper
						class="w-full h-[240rpx]"
						circular
						:indicator-dots="false"
						:autoplay="true"
						v-if="airInfo.detail_images && airInfo.detail_images.length"
					>
						<swiper-item
							v-for="(item, index) in airInfo.detail_images"
							:key="index"
						>
							<image
								@click="showImgs(index)"
								class="w-full h-[240rpx] rounded-lg mt-4"
								:src="item"
								mode="aspectFill"
							></image>
						</swiper-item>
					</swiper>
				</view>
				<view class="bg-white px-[30rpx] py-5 rounded-xl mt-3">
					<up-tabs
						@click="tabClick"
						lineHeight="2"
						:list="list1"
						lineColor="#4365DE"
						:inactiveStyle="{ color: '#1A1C1E' }"
						:activeStyle="{ color: '#4365DE' }"
						lineWidth="32"
						itemStyle="padding-left: 32rpx; padding-right: 32rpx; height: 45px;font-weight:700"
						:scrollable="false"
					></up-tabs>
					<view class="flex items-center mt-[30rpx] px-2" v-if="!current">
						<template v-for="(item, index) in airInfo.special" :key="index">
							<view
								class="flex flex-col justify-center w-1/3"
								v-if="item.state == 1"
							>
								<view class="text-[#9597A3] text-xs">{{ item.title }}</view>
								<view class="text-base text-[#1A1C1E] mt-2">{{
									item.intro
								}}</view>
							</view>
						</template>
					</view>
					<view
						class="flex items-center mt-[30rpx] px-2"
						v-else-if="current == 1"
					>
						<template v-for="(item, index) in airInfo.delivery" :key="index">
							<view
								class="flex flex-col justify-center"
								v-if="item.state == 1"
								:class="!index ? ' mr-[150rpx]' : ''"
							>
								<view class="text-[#9597A3] text-xs">{{ item.title }}</view>
								<view class="text-base text-[#1A1C1E] mt-2">{{
									item.intro
								}}</view>
							</view>
						</template>
					</view>
					<view
						class="flex items-center mt-[30rpx] px-2"
						v-else-if="current == 2"
					>
						<template v-for="(item, index) in airInfo.motor" :key="index">
							<view
								class="flex flex-col justify-center"
								:class="!index ? 'mr-[112rpx]' : ''"
								v-if="item.state == 1"
							>
								<view class="text-[#9597A3] text-xs">{{ item.title }}</view>
								<view class="text-base text-[#1A1C1E] mt-2">{{
									item.intro
								}}</view>
							</view>
						</template>
					</view>
					<view class="flex items-center mt-[30rpx] px-2" v-else>
						<template v-for="(item, index) in airInfo.sail" :key="index">
							<view
								class="flex flex-col justify-center w-1/3"
								v-if="item.state == 1"
							>
								<view class="text-[#9597A3] text-xs">{{ item.title }}</view>
								<view class="text-base text-[#1A1C1E] mt-2">{{
									item.intro
								}}</view>
							</view>
						</template>
					</view>
				</view>
				<view class="bg-white px-[30rpx] pb-[30rpx] pt-5 rounded-xl mt-3">
					<view class="text-black text-xl font-medium mb-[22rpx]">飞行航线</view>
					<view
						class="w-full h-[400rpx] rounded-lg overflow-hidden"
						style="transform: translateY(0)"
					>
						<map
							v-if="airInfo.start_lat"
							class="w-full h-full"
							:polyline="polylines"
							:longitude="airInfo.start_lng"
							:latitude="airInfo.start_lat"
							:scale="4"
						></map>
					</view>
				</view>
				<view class="bg-white rounded-xl p-[30rpx] mt-3">
					<view class="text-black text-xl font-medium mb-[22rpx]"
						>通用客舱布局</view
					>
					<swiper
						class="w-full h-[210rpx]"
						circular
						:indicator-dots="false"
						:autoplay="true"
					>
						<swiper-item
							v-for="(item, index) in airInfo.cabin_image"
							:key="index"
						>
							<image
								@click="showImg(index)"
								class="w-full h-[210rpx] rounded-lg"
								:src="item"
								mode="aspectFill"
							></image>
						</swiper-item>
					</swiper>
				</view>
				<view class="bg-white rounded-xl py-[30rpx] mt-3 mb-32">
					<view class="text-black text-xl font-medium mb-5 pl-5">服务/设施</view>

					<view class="pb-5">
						<view class="flex items-center">
							<image src="@/static/icon-5.png" class="w-[6rpx] h-[36rpx]"></image>
							<view class="text-main text-xl font-medium pl-[30rpx]"
								>航班服务</view
							>
						</view>
						<view class="flex items-center px-2 mt-[30rpx] flex-wrap">
							<view
								class="flex flex-col justify-center items-center w-1/4 mb-2"
								v-for="(item, index) in airInfo.service"
								:key="index"
							>
								<image class="w-6 h-6" :src="item.img"></image>
								<view class="text-xs text-[#1A1C1E] mt-[14rpx]">{{
									item.title
								}}</view>
							</view>
						</view>
						<view class="mx-5 aaaa mt-[18rpx]"></view>
					</view>
					<view class="pb-5">
						<view class="flex items-center">
							<image src="@/static/icon-5.png" class="w-[6rpx] h-[36rpx]"></image>
							<view class="text-main text-xl font-medium pl-[30rpx]"
								>基础设施</view
							>
						</view>
						<view class="flex items-center px-2 mt-[30rpx] flex-wrap">
							<view
								class="flex flex-col justify-center items-center w-1/4 mb-2"
								v-for="(item, index) in airInfo.plant"
								:key="index"
							>
								<image class="w-6 h-6" :src="item.img"></image>
								<view class="text-xs text-[#1A1C1E] mt-[14rpx]">{{
									item.title
								}}</view>
							</view>
						</view>
						<view class="mx-5 aaaa mt-[18rpx]"></view>
					</view>
					<view class="pb-5">
						<view class="flex items-center">
							<image src="@/static/icon-5.png" class="w-[6rpx] h-[36rpx]"></image>
							<view class="text-main text-xl font-medium pl-[30rpx]"
								>机上餐食</view
							>
						</view>
						<view class="flex items-center px-2 mt-[30rpx] flex-wrap">
							<view
								class="flex flex-col justify-center items-center w-1/4 mb-2"
								v-for="(item, index) in airInfo.food"
								:key="index"
							>
								<image class="w-6 h-6" :src="item.img"></image>
								<view class="text-xs text-[#1A1C1E] mt-[14rpx]">{{
									item.title
								}}</view>
							</view>
						</view>
						<view class="mx-5 aaaa mt-[18rpx]"></view>
					</view>
					<view class="pb-1">
						<view class="flex items-center">
							<image src="@/static/icon-5.png" class="w-[6rpx] h-[36rpx]"></image>
							<view class="text-main text-xl font-medium pl-[30rpx]"
								>娱乐安排</view
							>
						</view>
						<view class="flex items-center px-2 mt-[30rpx] flex-wrap">
							<view
								class="flex flex-col justify-center items-center w-1/4 mb-2"
								v-for="(item, index) in airInfo.fun"
								:key="index"
							>
								<image class="w-6 h-6" :src="item.img"></image>
								<view class="text-xs text-[#1A1C1E] mt-[14rpx]">{{
									item.title
								}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="fixed w-full bottom-0 bg-white pt-4 pb-5 px-5">
				<view class="flex justify-between items-center">
					<view>
						<view class="flex items-end">
							<view class="text-theme text-[40rpx] font-bold"
								><text class="text-[20rpx]"></text>
								<text>{{ airInfo.price }}{{ airInfo.unit }}</text></view
							>
							<!--
							<view
								class="text-[#BCBCBC] text-base pl-3 flex-1"
								style="text-decoration: line-through"
								>¥{{ airInfo.underline_price }}</view
							>
				-->
						</view>
						<image src="@/static/airp.png" class="w-[150rpx] h-4"> </image>
					</view>
					<view>
						<view
							@click="submit"
							class="w-[272rpx] h-[90rpx] leading-[90rpx] text-center text-white rounded font-medium text-lg"
							:class="airInfo.order_status == 1 ? 'bg-[#A2A4AE]' : 'bg-theme'"
							>{{ airInfo.order_status == 1 ? "已被预订" : "点击确认" }}</view
						>
						<view class="text-[#A2A4AE] text-[20rpx] mt-[10rpx]"
							>工作人员将在2小时内与您联系</view
						>
					</view>
				</view>
			</view>
		</template>
		<view v-else class="w-full flex-1 h-full flex flex-col bg-white">
			<image
				class="w-full"
				mode="widthFix"
				src="https://ykx-1254116920.cos.ap-nanjing.myqcloud.com/aircraft/111.jpg"
			></image>
		</view>
  </view>
</template>

<script setup lang="ts">
import { getCharterDetail_api } from "@/api/index";
import { ref, reactive, computed } from "vue";
import {
  onPageScroll,
  onLoad,
  onShareAppMessage,
  onShow,
} from "@dcloudio/uni-app";
import { useUserStore } from "@/stores/user.js";
const userStore = useUserStore();
const settingInfo = computed(() => userStore.setting);

onPageScroll((e) => {});
const list1 = reactive([
  { name: "规格" },
  { name: "运载" },
  { name: "发动机" },
  { name: "航行" },
]);

const polylines = computed(() => {
  return [
    {
      points: [
        {
          latitude: airInfo.value.start_lat,
          longitude: airInfo.value.start_lng,
        },
        {
          latitude: airInfo.value.end_lat,
          longitude: airInfo.value.end_lng,
        },
      ],
      color: "#4365DE",
      width: 3,
      dottedLine: false,
    },
  ];
});

const airInfo = ref({});
const getDetail = (id) => {
  getCharterDetail_api(id).then((res) => {
    airInfo.value = res;
  });
};
const aid = ref("");
onLoad(({ id }) => {
  aid.value = id;
});
onShow(() => {
  getDetail(aid.value);
});
const submit = () => {
  if (airInfo.value.order_status == 1) return;
  uni.navigateTo({
    url: `/pages/preference/coatConsultingPrices?id=${aid.value}&startCity=${airInfo.value.start_city}&endCity=${airInfo.value.end_city}&start_area_id=${airInfo.value.start_area_id}&end_area_id=${airInfo.value.end_area_id}&title=${airInfo.value.plan_name}`,
  });
};

// #ifdef MP
const systemInfo = uni.getSystemInfoSync();
// 获取胶囊按钮位置信息
const menuButtonInfo = uni.getMenuButtonBoundingClientRect();

// 计算导航栏高度（状态栏高度 + 胶囊按钮高度 + 上下边距）
const navHeight =
  menuButtonInfo.bottom + menuButtonInfo.top - systemInfo.statusBarHeight;
// #endif

const current = ref(0);
const tabClick = (e) => {
  console.log(e);
  current.value = e.index;
};

onShareAppMessage(() => {
  return {
    title: "私人飞机买卖、包机、咨询，专业团队为您提供全流程服务",
    path: `/pages/preference/preferenceDetail?id=${airInfo.value.id}`,
    imageUrl: settingInfo.value.shareImg,
  };
});

const trs = ref(true);
const getWidth = (src) => {
  uni.getImageInfo({
    src,
    success: function (image) {
      trs.value = image.width > 1000;
    },
  });
};

const showImg = (index) => {
  uni.previewImage({
    urls: airInfo.value.cabin_image,
    current: index,
    longPressActions: {
      itemList: ["保存图片"],
      success: function (data) {},
      fail: function (err) {
        console.log(err.errMsg);
      },
    },
  });
};
const showImgs = (index) => {
  uni.previewImage({
    urls: airInfo.value.detail_images,
    current: index,
    longPressActions: {
      itemList: ["保存图片"],
      success: function (data) {},
      fail: function (err) {
        console.log(err.errMsg);
      },
    },
  });
};
</script>

<style lang="scss" scoped>
:deep(.u-tabs__wrapper__nav) {
  display: flex;
  justify-content: space-between;
  margin: 0 -60rpx;
}
.aaaa {
  border: 2rpx solid #f7f7f7;
}
.bg-header {
  width: 100%;
  height: 460rpx;
  position: relative;
  z-index: -1; /* 保证内容层级高于背景 */
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("https://ykx-1254116920.cos.ap-nanjing.myqcloud.com/aircraft/fly/cmap.png");
    width: 100%;
    height: 460rpx;
    background-size: 100% 100%;
    background-size: cover;
    opacity: 0.5; /* 设置伪元素的透明度 */
    z-index: -2; /* 背景层级低于内容 */
  }
}
.img-cus {
  position: relative;
  width: 100vw;
  height: 210rpx;
  background-size: contain; /* 确保图片根据视口大小进行缩放 */
  animation: scroll 60s ease-in-out infinite;
}

@keyframes scroll {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: -100vw 0; /* 向左移动整个视口宽度 */
  }
  100% {
    background-position: 0 0; /* 移动回到初始位置 */
  }
}
</style>
